<template>
    <section class="index-nav">
        <div class="container" style="height: 45px;">
            <div class="classify" style="position: relative;">
                <Icon type="ios-paper" />
                项目分类
                <div class="category">
                    <ul class="first-category">
                        <li class="first-item" v-for="i in category" :key="i.id">
                            <Icon type="md-aperture" />
                            {{i.name}}
                            <div class="second-category" v-if="i.child">
                                <ul class="second-list">
                                    <li class="second-item" v-for="y in i.child" :key="y.id">
                                        <div class="second-header">
                                            <span class="seconde-name" >{{y.name}}</span>
                                            <span class="seconde-more" @click="goFun()">更多 <Icon type="ios-arrow-forward" /></span>
                                        </div>
                                        <div class="second-body">
                                            <span v-for="t in y.child" :key="t.id" :class="{'selected': t.select}" @click="fun()">
                                                {{t.name}}
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <Menu mode="horizontal" :theme="'light'" active-name="1" style="margin-left: 10px">
                <MenuItem name="1" to="/">
                    首页
                </MenuItem>
                <MenuItem name="2" to="/diary">
                    美丽日记
                </MenuItem>
                <Submenu name="3">
                    <template slot="title">
                        美淘
                    </template>
                    <MenuItem name="3-4" to="/commodity">商城</MenuItem>
                    <!--<MenuItem name="3-5">流失用户</MenuItem>-->
                </Submenu>
                <Submenu name="4">
                    <template slot="title">
                        社区
                    </template>
                    <MenuItem name="4-1" to="/circle">圈子</MenuItem>
                    <MenuItem name="4-2">社区</MenuItem>
                    <!--<MenuItem name="4-3">时段分析</MenuItem>-->
                </Submenu>
                <Submenu name="5">
                    <template slot="title">
                        医院\医生
                    </template>
                    <MenuItem name="5-1" to="/comhospital">医院</MenuItem>
                    <MenuItem name="5-2" to="/cosmetology">美容机构</MenuItem>
                    <MenuItem name="5-3" to="/beautician">医生</MenuItem>
                    <MenuItem name="5-4" to="/translate">翻译</MenuItem>
                    <MenuItem name="5-5" to="/lawyer">律师</MenuItem>
                </Submenu>
                <Submenu name="6">
                    <template slot="title">
                        整形问答
                    </template>
                    <MenuItem name="6-1" to="/question">整形问答</MenuItem>
                    <!--<MenuItem name="6-2">活跃分析</MenuItem>-->
                    <!--<MenuItem name="6-3">时段分析</MenuItem>-->
                </Submenu>
                <MenuItem name="7" to="/projects">
                    项目百科
                </MenuItem>
            </Menu>
        </div>
        <div class="swiper">
            <Carousel autoplay loop>
                <CarouselItem>
                    <div class="carousel">
                        <img src="./img/banner1.jpg" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="./img/banner2.jpg" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="./img/banner3.jpg" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="./img/banner4.jpg" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="./img/banner5.jpg" alt="">
                    </div>
                </CarouselItem>
            </Carousel>
        </div>
    </section>
</template>

<script>
export default {
  name: 'IndexNav',
  data () {
      return {
          category: [
              {id: 1, name: '眼睛', child: [{id: 2, name: '眼皮', child: [{id: 3, select: true, name: '双眼皮'}]}]},
              {id: 2, name: '鼻子', child: [{id: 2, name: '鼻梁', child: [{id: 3, select: false, name: '手术缩鼻翼'}]}]},
              {id: 3, name: '面部', child: [{id: 2, name: '洁面', child: [{id: 3, select: true, name: '玻尿酸去黑眼圈'}]}]},
              {id: 4, name: '胸部', child: [{id: 2, name: '隆胸', child: [{id: 3, select: true, name: '自体脂肪隆胸'}]}]},
              {id: 5, name: '整形', child: [{id: 2, name: '微整', child: [{id: 3, select: false, name: '小腿神经阻断术'}]}]},
              {id: 6, name: '美容', child: [{id: 2, name: '美面', child: [{id: 3, select: true, name: '拉皮提升'}]}]},
              {id: 7, name: '耳部', child: [{id: 2, name: '耳洞', child: [{id: 3, select: false, name: '自体脂肪丰臀'}]}]},
              {id: 8, name: '牙齿', child: [{id: 2, name: '洗牙', child: [{id: 3, select: true, name: '肉毒素去木偶纹'}]}]},
              {id: 9, name: '私密', child: [{id: 2, name: '护理', child: [{id: 3, select: false, name: '青春解码仪美肤'}]}]},
              {id: 0, name: '更多...'}
          ]
      }
  },
    methods :{
      fun () {
         this.$router.push({path:'/projectsdelist'})
      },
        goFun () {
            this.$router.push({path:'/projects'})
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../style/style.less";
    .index-nav {
        background-color: #fff;
        .classify {
            display: inline-block;
            width: 180px;
            height: 45px;
            line-height: 45px;
            background-color: @theme-color-dark;
            padding: 0 15px;
            position: relative;
            color: #fff;
            text-align: center;
            float: left;
            font-size: 15px;
            &:after{
                content: url("./img/angle.png");
                position: absolute;
                right: -18px;
                bottom: -17px;
                z-index: 901;
            }
        }
        .ivu-menu-horizontal {
            height: 45px!important;
            line-height: 45px!important;
            display: inline-block;
            .ivu-menu-item-active, .ivu-menu-item:hover, .ivu-menu-submenu:hover {
               border-bottom-color: transparent!important;
           }
        }
        .swiper {
            height: 450px;
            .carousel {
                height: 450px;
                img {
                    height: 450px;
                }
            }
        }
        .category {
            background-color: #fff;
            width: 180px;
            height: 450px;
            position: absolute;
            top: 45px;
            left: 0;
            z-index: 1024;
            color: #333;
            box-shadow: 2px 0 4px 0 rgba(0, 0, 0, .6);
            .first-category {
                list-style: none;
                position: relative;
                .first-item {
                    cursor:pointer;
                    .ivu-icon {
                        color: @theme-color-dark;
                        font-size: 20px;
                        margin-right: 10px;
                    }
                    &:hover {
                        background-color: @theme-color;
                        padding-left: 10px;
                        .second-category {
                            display: inline-block;
                        }
                    }
                    .second-category {
                        display: none;
                        height: 450px;
                        width: 460px;
                        background-color: #fff;
                        position: absolute;
                        top: 0;
                        left: 180px;
                        text-align: left;
                        box-shadow: -2px 0 4px 0 rgba(0, 0, 0, .4);
                        .second-list {
                            padding: 10px;
                            .second-item{
                                border-bottom: 1px solid #dfdfdf;
                                padding: 0 0 15px;
                                .seconde-more {
                                    float: right;
                                    color: @theme-color-dark;
                                }
                                .second-body {
                                    color: #999999;
                                    line-height: 1;
                                    span{
                                        display: inline-block;
                                        margin-right: 10px;
                                        font-size: 12px;
                                    }
                                    span.selected{
                                        color: @theme-color;
                                    }
                                }
                            }
                        }

                    }
                }
            }
        }
    }
</style>
